<template>
    <div class="l-1">
        <!--头部+banner-->
        <div class="a-1">
            <!--顶部导航-->
            <div class="a-2">
                <div class="a-3">
                    <Header v-bind:state=0></Header>
                </div>
            </div>
        </div>
        <!--登录-->
        <div class="r-1">
            <div class="r-2 s-1">
                <div class="r-3">
                    <img src="@/assets/image/logo3.png" />
                </div>
                <div class="r-5 s-2">
                    <div class="r-6">
                        <div class="r-7 s-3"><img class="r-8" src="@/assets/image/yhm.png"/><input class="r-9" type="text" v-model="username" placeholder="请输入账户"/></div>
                        <div class="r-7 s-3"><img class="r-8" src="@/assets/image/phone.png"/><input class="r-9" type="text" v-model="phone" placeholder="请输入手机号码"/></div>
                        <div class="r-7 s-3"><img class="r-8" src="@/assets/image/mm.png"/><input class="r-9" type="text" v-model="code" placeholder="请输入短信验证码"/>
                        <!-- <button class="r-16" @click="sendCode">发送验证码</button> -->
                        <button v-if="smsButton" type="button" class="r-16" @click="sendCode">发送验证码</button>
                           <button v-if="!smsButton" type="button" class="r-16">{{count}} s</button>
                        </div>
                        <div class="r-7 s-3"><img class="r-8" src="@/assets/image/ys.png"/><input class="r-9" type="text" v-model="password" placeholder="设置6至20位登录密码"/></div>
                        <div class="r-7 s-3"><img class="r-8" src="@/assets/image/ys.png"/><input class="r-9" type="text" v-model="surepassword" placeholder="请再次输入登录密码"/></div>
                        <div class="r-11 s-5">
                            <label class="r-12"><input name="jz" type="checkbox" v-model="checksure" value="1">勾选同意</label>
                            <a class="s-4" href="javascript:;" @click="showAgreement">《用户服务协议》</a>
                        </div>
                        <button class="r-10" type="button" @click="sureSumbit">注册</button>
                    </div>
                    <div class="s-6">已有账号，<a href="javascript:;" @click="goLogin">立即登录</a></div>
                </div>
            </div>
        </div>
        <!--注册协议书-->
        <div class="p-30 p3-30"  v-if="onShow">
            <div class="p-31">
                <div class="p-32">
                    <div class="p-33">用户服务协议</div>
                    <div class="p-34">
                        <div class="p-36">
                            <div class="p-58" style="line-height: 35px;">
                                ××建筑工程公司（甲方）<br />
                                ××装修设计公司（乙方）<br />
                                为发挥双方的优势，共谋发展，并为今后逐步向组成集团公司过渡，双方经过充分友好的协商，特订立本协议。<br />
                                一、建立密切的技术合作关系，今后凡甲方承接的工程，装修设计任务均交给乙方承担。<br />
                                二、乙方保证，在接到任务后，将立即组织以高级工程师为领导的精干设计队伍，在10日提出设计方案，并在方案认可后一个月内完成全部设计图纸。<br />
                                三、为保证设计的质量，甲方将毫无保留地向乙方提供所需的一切建筑技术资料。<br />
                                四、装修施工队伍由甲方组织，装修工程的施工由甲方组织实施。施工期间，乙方派出高级工程师监督施工，以保证工程的质量。<br />
                                五、甲方按装修工程总费用的千分之×向乙方支付设计费。<br />
                                六、本协议自签订之日起生效。<br />
                                七、本协议书一式两份，双方各执一份。<br />
                                附件：《××建筑装修工程集团公司组建意向书》一份。<br />
                                甲方 ××建筑工程公司（盖章）<br />
                                法人代表：××（签字）<br />
                                乙方 ××装修设计公司（盖章）<br />
                                法人代表：××（签字）<br />
                                19××年×月×日<br />
                                甲方地址：×××××× 乙方地址：××××××<br />
                                邮政编码：×××××× 邮政编码：××××××<br />
                                电话兼传真：×××××× 电话兼传真：××××××<br />
                                银行账号：×××× 银行账号：××××<br />
                                联系人：×××联系人：×××<br />
                            </div>
                        </div>
                        <div class="p-53">
                            <button class="p-54 p1-54" type="button" @click="showAgreement">我知道了</button>
                        </div>
                    </div>
                </div>
                <img class="p-55 p3-55" src="@/assets/image/close1.png" @click="showAgreement"/>
            </div>
        </div>
    </div>
</template>

<script>
    import Header from '@/views/header.vue';
    import {registerUser,sendOutSms} from "@/api/register"
    var _self;
    export default {
        name: "register",
        components:{
            Header
        },
        data(){
            return{
                onShow:false,
                username:"",
                password:"",
                phone:"",
                code:"",
                surepassword:"",
                checksure:0,
                smsButton:true,    //防止短信重复发送
                count:'', //短信倒计时
                timer:null, //定时器
            }
        },
        created(){
           _self = this;
        },
        methods:{
            showAgreement(){
                console.log("切换");
                if(this.onShow){
                    this.onShow=false;
                }else{
                    this.onShow=true;
                }
            },
            goLogin(){
                this.$router.push('/login');
            },
            sendCode(){

               if(!this.smsButton){
                return   //拦截
              }
              this.smsButton=false; //按钮失效
              var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
              
              if (!myreg.test(this.phone)) {
                this.msgError("手机格式不正确");
                this.smsButton=true;
              } else {
                const TIME_COUNT=60;
                if(!this.timer){
                  this.count=TIME_COUNT;
                  this.timer=setInterval(()=>{
                    if(this.count>0 && this.count<=TIME_COUNT){
                      this.count--;
                    }else{
                      this.smsButton=true;
                      clearImmediate(this.timer)
                      this.timer=null
                    }
                  },1000)
                }
               let data={"phone":_self.phone,"type":0}
                sendOutSms(data).then(response=>{
                  if(response.code===200){
                    this.msgSuccess("短信发送成功");
                  }
                })
              }


            //     if(!_self.phone){_self.$message.error("请输入有效的手机号码");return false}
            //    let data={"phone":_self.phone,"type":0}
            //    sendOutSms(data).then((res)=>{
            //        if(res.code==200){
            //            _self.$message({
            //           message: '短信发送成功，请注意思查收',
            //         type: 'success'
            //        });
                       
            //        }
            //    })
              },
            sureSumbit(){
              if(!_self.username){_self.$message.error("请输入账号");return false}
              if(!_self.password){_self.$message.error("请输入密码");return false}
              if(!_self.phone){_self.$message.error("请输入手机号码");return false}
              if(!_self.code){_self.$message.error("请输入验证码");return false}
              if(!_self.surepassword){_self.$message.error("请再次输入密码");return false}
              if(_self.password!=_self.surepassword){_self.$message.error("两次密码不一致");return false}
              if(_self.checksure==0){_self.$message.error("请勾选同意会员协议");return false}
               let param = {"username":_self.username,"password":_self.password,"code":_self.code,"phone":_self.phone}
               registerUser(param).then((res)=>{
                   console.log(res);
                   if(res.code==200){
                        _self.msgSuccess("注册成功，立即登录")
                       _self.goLogin()
                   }
               })
            }
        }
    }
</script>

<style scoped>
    @import "../css/index.css";
    @import "../css/login.css";
    @import "../css/user_addlistingl.css";
    @import "../css/idangerous.swiper.css";
</style>